<div class="example-container mat-elevation-z8" *ngIf="dataSource">
  <mat-table #table [dataSource]="dataSource">

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns     are set as a property on the row definition" -->

    <!-- ID Column -->
    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
    </ng-container>

    <!-- Progress Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> 用户名 </mat-header-cell>
      <mat-cell *matCellDef="let row"> <a routerLink="/details/{{row.id}}">{{row.name}}<div *ngIf="!row.name" class="unknow">未知</div> </a> </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="isOn">
      <mat-header-cell *matHeaderCellDef> 启用 </mat-header-cell>
      <mat-cell *matCellDef="let row" [ngClass]="{on:row.isOn,notOn:!row.isOn}" [ngSwitch]="row.isOn">
        <div *ngSwitchCase="true">是</div>
        <div *ngSwitchCase="false">否</div>
        <div *ngSwitchDefault>否</div>
       </mat-cell>
    </ng-container>

    <!-- Color Column -->
    <ng-container matColumnDef="sex">
      <mat-header-cell *matHeaderCellDef> 性别 </mat-header-cell>
      <mat-cell *matCellDef="let row" [ngClass]="{man:row.sex==1,woman:row.sex==2,unknow:row.sex==0}" [ngSwitch]="row.sex">
        <div *ngSwitchCase="1">男</div>
        <div *ngSwitchCase="2">女</div>
        <div *ngSwitchDefault>未知</div>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="birthDay">
      <mat-header-cell *matHeaderCellDef> 生日 </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.birthDay}}<div *ngIf="!row.birthDay" class="unknow">未知</div> </mat-cell>
    </ng-container>

    <ng-container matColumnDef="groups">
      <mat-header-cell *matHeaderCellDef> 分组 </mat-header-cell>
      <mat-cell *matCellDef="let row" [ngClass]="{ordinary:row.groups==0,important:row.groups==1}" [ngSwitch]="row.groups">
        <div *ngSwitchCase="0">一般</div>
        <div *ngSwitchCase="1">重要</div>
        <div *ngSwitchDefault>未知</div>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="veryConcerned">
      <mat-header-cell *matHeaderCellDef> 特别关心 </mat-header-cell>
      <mat-cell *matCellDef="let row" [ngClass]="{on:row.veryConcerned,notOn:!row.veryConcerned}" [ngSwitch]="row.veryConcerned">
        <div *ngSwitchCase="true">是</div>
        <div *ngSwitchCase="false">否</div>
        <div *ngSwitchDefault>否</div>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="abilityValue">
      <mat-header-cell *matHeaderCellDef> 能力值 </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.abilityValue}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="remark">
      <mat-header-cell *matHeaderCellDef> 备注 </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.remark}} <div *ngIf="!row.remark" class="unknow">无</div></mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>
